<template>
  <div class="feast" ref="feast"
       @click="isActive ? unmagnify() : ''">
    <dl class="desk" v-for="(item, index) in masterFeast.desks"
        @click.stop="!isActive && isCreate ? magnify($event) : ''">
      <dt><span>{{index === 0 ? '主宾桌' : '第' + index + '席'}}</span></dt>
      <dd v-for="(seat, seatIndex) in item"
          @click="isActive && userInfo.id !== master ? sitDown(index, seatIndex) : ''">
        <img :src="seat.head" v-if="seat.head">
      </dd>
    </dl>
    <dl class="desk" @click.stop="isCreate ? addDesk() : ''">
      <dt class="iconfont icon-jiahao"></dt>
      <dd v-for="index in 6"></dd>
    </dl>
  </div>
</template>

<script>
  export default{
    created: function () {
      this.syncDesks();
    },
    data: function () {
      return {
        getFeastPath: 'static/data/get_feast.json',
        masterFeast: {
          id: '',
          name: '',
          desks: []
        },
        emptyDesk: [{}, {}, {}, {}, {}, {}],
        isActive: false,
        isCreate: false,
        isSitDown: false,
        joinCount: null,
        userJoinInfo: {
          num: null,
          desk: null,
          seat: null
        }
      }
    },
    props: ['userInfo', 'master'],
    methods: {
      syncDesks: function (onComplete) {
        axios.get(this.getFeastPath + '?userid=' + this.master).then((res) => {
          let oldData = this.masterFeast.desks.slice(0);

          if (res.data.masterFeast
            && Object.values(res.data.masterFeast).length !== 0) {

            if (!this.isCreate) {
              this.$set(this, 'isCreate', true);
            }

            this.$set(this, 'masterFeast', res.data.masterFeast);
            let desks = this.masterFeast.desks,
              length = desks.length;

            if (!this.isSitDown || !this.joinCount) {
              this.$set(this, 'joinCount', 0);
              for (let i = 0; i < length; i++) {
                for (let j = 0; j < 6; j++) {
                  if (desks[i][j].id && this.userInfo.id && desks[i][j].id === this.userInfo.id) {
                    this.$set(this, 'isSitDown', true);
                    this.$set(this.userJoinInfo, 'num', desks[i][j].num);
                    this.$set(this.userJoinInfo, 'desk', i);
                    this.$set(this.userJoinInfo, 'seat', j);
                  }
                  if (Object.values(desks[i][j]).length !== 0) {
                    this.joinCount++;
                  }
                }
              }
              if (!this.userJoinInfo.num) {
                this.$set(this.userJoinInfo, 'num', this.joinCount + 1);
              }
            }

            if (length < 6) {
              for (let i = 0; i < 6 - length; i++) {
                desks.push(this.emptyDesk.slice(0));
              }
            } else if (length < oldData.length) {
              for (let i = 0; i < oldData.length - length; i++) {
                desks.push(this.emptyDesk.slice(0));
              }
            }

          } else {
            let desks = this.masterFeast.desks;
            for (let i = 0; i < 6; i++) {
              desks.push(this.emptyDesk.slice(0));
            }
          }

          typeof onComplete === 'function' ? onComplete() : '';
        }).catch((error) => {
          console.log(error);
        });
      },
      magnify: function (event) {
        this.$set(this, 'isActive', true);
        let regExp = /dl/i,
          desk = event.target;
        while (true) {
          if (regExp.test(desk.nodeName)) {
            break;
          }
          desk = desk.parentNode;
        }
        adaptive.setTransition(this.$refs.feast, 'none');
        adaptive.setTransition(desk, 'none');
        adaptive.getTransform(desk);
        adaptive.getTransform(this.$refs.feast);
        adaptive.setTransition(desk, '');
        adaptive.setTransition(this.$refs.feast, '');
        let feast = this.$refs.feast.getBoundingClientRect(),
          pos = desk.getBoundingClientRect(),
          posCenterX = pos.left + pos.width / 2,
          posCenterY = pos.top + pos.height / 2;
        if (desk === this.$refs.feast.firstElementChild) {
          let scale = Number(
            adaptive.getTransform(desk)
              .split(',')[3].trim()
          );
          posCenterY = pos.top + pos.height / scale / 2;
        }
        adaptive.setTransform(this.$refs.feast, "translate(" + (
            (feast.left + feast.width / 2) - posCenterX
          ) + "px, " + (
            (feast.top + feast.height / 2) - posCenterY
          ) + "px) scale(2.5)");
        adaptive.setTransformOrigin(this.$refs.feast,
          posCenterX / feast.width * 100 + "% " +
          posCenterY / feast.height * 100 + "%");
        this.$refs.feast.style.overflow = 'hidden';
        for (let i = 0; i < this.$refs.feast.children.length; i++) {
          let thisDesk = this.$refs.feast.children[i];
          if (thisDesk !== desk) {
            thisDesk.style.visibility = 'hidden';
            thisDesk.style.opacity = 0;
          } else {
            if (thisDesk === this.$refs.feast.firstElementChild) {
              adaptive.setTransform(thisDesk, 'none');
              adaptive.setTransform(thisDesk.firstElementChild.firstElementChild, 'none');
            }
          }
        }
      },
      unmagnify: function () {
        adaptive.setTransform(this.$refs.feast, '');
        this.$refs.feast.style.overflow = 'auto';
        for (let i = 0; i < this.$refs.feast.children.length; i++) {
          let thisDesk = this.$refs.feast.children[i];
          thisDesk.removeAttribute('style');
          if (thisDesk === this.$refs.feast.firstElementChild) {
            adaptive.setTransform(thisDesk.firstElementChild.firstElementChild, '');
          }
        }
        this.$set(this, 'isActive', false);
      },
      addDesk: function () {
        let oldLength = this.masterFeast.desks.length;
        this.syncDesks(() => {
          let desks = this.masterFeast.desks;
          if (desks.length <= oldLength) {
            for (let i = 0; i < desks.length; i++) {
              for (let j = 0; j < desks[i].length; j++) {
                if (Object.values(desks[i][j]).length === 0) {
                  alert('座位还未被坐满！');
                  return;
                }
              }
            }
            desks.push(this.emptyDesk.slice(0));
          }
        });
      },
      sitDown: function (deskIndex, seatIndex) {
        let desks = this.masterFeast.desks;
        this.syncDesks(() => {
          if (Object.values(
              desks[deskIndex][seatIndex]
            ).length === 0) {
            if (this.isSitDown) {
              alert('您已经报名入席了！');
              return;
            }
            this.$set(this.masterFeast.desks[deskIndex], seatIndex, {
              id: this.userInfo.id,
              name: this.userInfo.name,
              head: this.userInfo.head
            });
            this.$emit('onSitDown');
          } else {
            alert('对不起！这个位置已经有宾客坐下了！');
          }
        });
      }
    }
  }
</script>

<style type="stylesheet/scss" lang="scss" scoped>
  @import "../assets/scss/_config.scss";

  .feast {
    transition: transform 300ms ease;
    height: setRem(792px);
    overflow: auto;
    padding: 0 15%;
    dl.desk {
      position: relative;
      float: right;
      width: setRem(156px);
      height: setRem(166px);
      color: #BF0C21;
      transition: visibility 300ms ease, opacity 300ms ease;
      &:first-child {
        float: none;
        margin: auto;
        transform: scale(1.4);
        transform-origin: top;
        margin-bottom: setRem(70px);
        transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
        dt {
          span {
            transform: scale(0.7142857142857143);
            transition: transform 300ms ease;
          }
        }
      }
      &:nth-child(n + 4) {
        margin-top: setRem(28px);
      }
      &:nth-child(2n) {
        clear: both;
        float: left;
      }
      &:last-child {
        dt {
          font-size: setRem(32px);
        }
      }
      dt, dd {
        background-color: #E7C598;
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        box-shadow: setRem(2px) setRem(2px) 0 0 #231815;
      }
      dt {
        width: setRem(88px);
        height: setRem(88px);
        line-height: setRem(88px);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: setRem(20px);
        span {
          display: block;
        }
      }
      dd {
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: setRem(18px);
        width: setRem(32px);
        height: setRem(32px);
        line-height: setRem(32px);
        position: absolute;
        &::before {
          content: '\e66d';
        }
        &:nth-of-type(1), &:nth-of-type(4) {
          left: 0;
          right: 0;
          margin: auto;
        }
        &:nth-of-type(2), &:nth-of-type(3) {
          right: 0;
        }
        &:nth-of-type(5), &:nth-of-type(6) {
          left: 0;
        }
        &:nth-of-type(2), &:nth-of-type(6) {
          top: 20%;
        }
        &:nth-of-type(3), &:nth-of-type(5) {
          bottom: 20%;
        }
        &:nth-of-type(1) {
          top: 0;
        }
        &:nth-of-type(4) {
          bottom: 0;
        }
        img {
          border-radius: 50%;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          max-width: 100%;
          max-height: 100%;
          margin: auto;
        }
      }
    }
  }
</style>

